<template>
    <div>
        <div class="center">
            <div class="label">编号:</div>
            <div class="number">{{addForm.customerNo}}</div>
        </div>
        <Form :model="addForm" :label-width="100" class="center" ref="addForm" :rules="rules">
            <FormItem label="客户名称:" prop="customerName">
                <Input type="text" clearable style="width: 240px" placeholder="请输入客户名称" v-model="addForm.customerName" :maxlength="255" :disabled="isEditor"></Input>
            </FormItem>
            <FormItem label="联系人:" prop="employeeName">
                <Input type="text" clearable style="width: 240px" placeholder="请输入联系人" v-model="addForm.employeeName"  :maxlength="255"></Input>
            </FormItem>
            <FormItem label="联系方式:" prop="contact">
                <Input type="text" clearable style="width: 240px" placeholder="请输入邮箱或手机号" v-model="addForm.contact" :maxlength="255"></Input>
            </FormItem>
            <FormItem label="业务系统:" prop="bizSystem">
                <Select v-model="addForm.bizSystem" clearable style="width:240px" :disabled="isEditor">
                    <Option v-for="(key, value) in systems" :value="value" :key="key">{{ key }}</Option>
                </Select>
            </FormItem>
            <div class="divided"></div>
            <FormItem label="用户名:" prop="userName">
                <Input type="text" clearable style="width: 240px" placeholder="请输入用户名" v-model="addForm.userName" :maxlength="255" :disabled="isEditor"></Input>
            </FormItem>
            <FormItem label="初始密码:" prop="password">
                <Input type="text" clearable style="width: 240px" placeholder="请输入用户名" v-model="addForm.password" :maxlength="255" :disabled="isEditor"></Input>
            </FormItem>
            <div class="btn-group" >
                <Button @click="submit" type="primary">提交</Button>
                <Button class="margin-left-70">取消</Button>
            </div>
        </Form>
    </div>
</template>

<script>
import * as client from '../../http/client.api'
export default {
    data() {
        return {
            isEditor: false,
            CustomerInfo: {},
            spinShow:false,
            addForm: {
                customerNo: '',
                customerName: '',
                employeeName: '',
                contact: '',
                bizSystem: '',
                userName: '',
                password: '',
            },
            rules:{
                customerName:[
                    { required: true, message: '客户名称不能为空', trigger: 'blur' },
                ],
                employeeName:[
                    { required: true, message: '联系人不能为空', trigger: 'blur' },
                ],
                contact: [
                    { required: true, message: '联系方式不能为空', trigger: 'blur' },
                    {pattern: /(^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$)|(^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$)/, message: '您输入的手机号或邮箱格式错误', trigger: 'blur' }
                ],
                bizSystem: [
                    { required: true, message: '业务系统不能为空', trigger: 'blur' },
                ],
                userName: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '初始密码不能为空', trigger: 'blur' },
                ],
            },
            editRules:{
                employeeName:[
                    { required: true, message: '联系人不能为空', trigger: 'blur' },
                ],
                contact: [
                    { required: true, message: '联系方式不能为空', trigger: 'blur' },
                    {pattern: /(^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$)|(^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$)/, message: '您输入的手机号或邮箱格式错误', trigger: 'blur' }
                ],
            },
            systems: {
                0: '进销存系统',
                1: '销售系统',
                2: '仓储系统'
            }
        }
    },
    methods: {
        // 获取客户信息
        getCustomer(id) {
            const _this = this;
            client.getCustormer(id).then(res => {
                const result = res.data.result
                if (res.data.success) {
                    let newForm = {};
                    for (let key in _this.addForm) {
                        newForm[key] = result[key]
                    }
                    _this.CustomerInfo = result;
                    _this.addForm = newForm;
                }
            })
        },
        // 获取客户编号
        getCustomerNo() {
            const _this = this;
            client.getCustomerNo().then(res => {
                if (res.data.success) {
                    _this.addForm.customerNo = res.data.result;
                }
            })
        },
        // 新增客户
        addCustomer() {
            const _this = this
            client.addCustomer(_this.addForm).then(res => {
                if (res.data.success) {
                    _this.$router.push('/client')
                }
            })
        },
        editCustomer() {
            const _this = this;
            const args = {
                id: _this.CustomerInfo.id,
                contact: _this.addForm.contact,
                employeeName: this.addForm.employeeName
            };
            this.$Modal.confirm({
                title: '编辑客户',
                content: `<h4>说明:是否保存客户信息?</h4>`,
                loading: true,
                onOk: () => {
                    this.spinShow = true
                    client.operateCustomer(args).then(suc => {
                        this.$Modal.remove();
                        this.spinShow = false
                    }).catch(err => {
                        this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                        this.$Modal.remove()
                        this.spinShow = false
                    })
                },
                onCancel: () => {
                }
            })
            client.operateCustomer(args).then(res => {

            })
        },
        // 提交按钮
        submit() {
            this.$refs.addForm.validate((valid) =>{
                if (valid) {

                }
            })
        },

    },
    created() {
        const id = this.$route.query.id
        if (id) {
            this.isEditor = true;
            this.rules = this.editRules
            this.getCustomer(id);
        } else {
            this.getCustomerNo();
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
    .divided {
        margin-bottom: 24px;
        border-bottom: 1px dashed #333;
    }
    .center {
        width: 600px;
        margin: 0 auto;
    }
    .btn-group {
        margin-top: 40px;
        width: 335px;
        text-align: center;
    }
    .label {
        display: inline-block;
        width: 100px;
        text-align: right;
        padding: 10px 5px 10px 0;
        margin-bottom: 15px;
    }
    .number {
        display: inline-block;
        font-size: 20px;
    }

</style>